<template>
    <AntdConfirmModal title="新增流程定义" ref="modalRef" width="700px" :keepSlot="false" @confirm="submitForm">
        <a-form :model="form" name="basic" :label-col="{ span: 8 }">
            <a-row>
                <a-col :span="12">
                    <a-form-item label="流程分组" name="flowGroup" :rules="[{ required: true, message: '请输入流程分组' }]">
                        <a-input v-model:value="form.flowGroup" placeholder="请输入流程分组" maxlength="30" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="流程名称" name="flowName" :rules="[{ required: true, message: '请输入流程名称' }]">
                        <a-input v-model:value="form.flowName" placeholder="请输入流程名称" maxlength="30" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-form-item :label-col="{ span: 4 }" label="流程定义编码" name="flowDefineCode"
                :rules="[{ required: true, message: '请输入流程定义编码' }]">
                <a-input style="width: 250px;" v-model:value="form.flowDefineCode" placeholder="请输入流程定义编码" maxlength="30" />
            </a-form-item>
            <a-form-item :label-col="{ span: 4 }" label="流程定义" :rules="[{ required: true, message: '请输入流程定义' }]">
                <JsonEditor style="width: 400px;" v-model:value="form.flowDefine">
                </JsonEditor>
            </a-form-item>
            <a-form-item label="状态" :label-col="{ span: 4 }" name="status">
                <a-radio-group v-model:value="form.status">
                    <a-radio v-for="dict in status_dict" :value="dict.value" :key="dict.value" :label="dict.value">{{
                        dict.label
                    }}</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item :label-col="{ span: 4 }" label="流程描述">
                <a-textarea v-model:value="form.description" />
            </a-form-item>
        </a-form>
    </AntdConfirmModal>
</template>
<script setup>
import { createOne } from '@/module/flow/api/define';
import useApp from '@/hooks';
const { $ } = useApp();
const modalRef = ref(null);
import { status_dict } from '@/constant/dict'
const form = ref({
    flowGroup: undefined,
    flowName: undefined,
    flowDefineCode: undefined,
    flowDefine: undefined,

    status: 1,
    description: undefined
})
$.on('create-define', res => {
    modalRef.value.openModal();
})
/** 提交按钮 */
function submitForm() {
    createOne(form.value).then(res => {
        console.log(res)
        $.showToast({
            title: '创建成功',
            icon: 'success'
        })
        $.emit('fresh-define', null);
        modalRef.value.closeModal()
    })
}
</script>